$(function($) {
    var shop = cookie.get('shop');
    if (shop) {
        shop = JSON.parse(shop);
        var idList = shop.map(elm => elm.id).join();
        var zongjia = 0; //变量声明一定要写在外面
        $.ajax({
            type: "get",
            url: "../../lib/shop.php",
            data: {
                "idList": idList
            },
            dataType: "json",
            success: function(res) {
                // console.log(res);
                var template = "";
                res.forEach((elm, i) => {
                    var pic = JSON.parse(elm.pic);
                    // 从cookie里拿值
                    var arr = shop.filter((val, i) => {
                        return val.id === elm.id;
                    });
                    template = `<div class="shopcar_box">
                    <img src="${arr[0].colorsrc}" alt="">
                    <div class="shop_title">
                        <a href="./goods.html">${elm.title}</a>
                       <i class="danjia">${arr[0].num*elm.price}</i> <i>￥</i>
                    </div>
                    <p>${elm.name}</p>
                    <p>煤黑/金属银/黑</p>
                    <p class="sizenum">
                        尺码<select name="cm" id="cm">
                            <option value="${arr[0].size}">${arr[0].size}</option>
                            <option value="36">36</option>
                            <option value="37">37</option>
                            <option value="38">38</option>
                            <option value="39">39</option>
                            <option value="40">40</option>
                        </select> 数量;
                        <select name="2" class="sl">
                                <option value="${arr[0].num}">${arr[0].num}</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                    </p>
                    <br>
                    <a href="" class="delete" title="${elm.id}">删除</a>
                </div>`;
                    $('.shopcarlist').append(template);
                    var danjia = Number(arr[0].num * elm.price);
                    // console.log(danjia);
                    zongjia += danjia;
                }); //循环结束
                $('.sl').on('change', this, function() {
                    var shuliang = Number($(this).val());
                    var xiaoji = Number($(this).parent().prev().prev().prev().find('.danjia').text());
                    // console.log(shuliang * xiaoji);
                    $(this).parent().prev().prev().prev().find('.danjia').text(xiaoji * shuliang);
                    var sum = 0;
                    $('.danjia').each((i, elm) => {
                        sum += Number($(elm).text());
                        console.log(sum);
                    });
                    $('.allprice').first().text('小计' + sum);
                    $('.allprice').last().text('总价' + sum);
                });
                // 总价
                $('.allprice').append(zongjia);

                // 删除功能↓
                $('.shopcar_box').on('click', '.delete', function() {
                    let that = $(this);
                    // console.log(that);
                    let id = that.attr('title');
                    // console.log(id);
                    shop.splice($.inArray(id, shop), 1);
                    console.log(shop);
                    cookie.set('shop', JSON.stringify(shop), 1);
                    // cookie.remove(''); //清除cookie
                    location.reload(); //重新加载页面
                    return false;
                });
            }
        });
    }

}, (jQuery));